<template>
    <div>
        <div class="header">
            <el-button type="text" @click="addCourse">添加课程组合</el-button>
        </div>
        <div v-if="CombinationList.length != 0">
            <el-card class="box-card" v-for="c in CombinationList" :key="c.id">
                <div slot="header" class="clearfix">
                    <span>{{ c.combinationName }}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="deleteC(c.id)">删除该组合</el-button>
                </div>
                <div class="text item" style="display: flex;flex-direction: column;justify-content: center;">
                    <span v-if="c.yuwen != 0">语文 {{ c.yuwen }}</span>
                    <span v-if="c.shuxue != 0">数学 {{ c.shuxue }}</span>
                    <span v-if="c.yingyu != 0">英语 {{ c.yingyu }}</span>
                    <span v-if="c.wuli != 0">物理 {{ c.wuli }}</span>
                    <span v-if="c.huaxue != 0">化学 {{ c.huaxue }}</span>
                    <span v-if="c.shengwu != 0">生物 {{ c.shengwu }}</span>
                    <span v-if="c.lishi != 0">历史 {{ c.lishi }}</span>
                    <span v-if="c.zhengzhi != 0">政治 {{ c.zhengzhi }}</span>
                    <span v-if="c.dili != 0">地理 {{ c.dili }}</span>
                </div>
            </el-card>
        </div>
        <div v-else style="height: 500px;display: flex;justify-content: center;align-items: center;">
            暂无数据
        </div>
    </div>
</template>
  
<script>

export default {
    name: 'GradePage',
    components: {
    },
    data() {
        return {
            msg: '选课管理',
            userInfo: {},
            CombinationList: []
        }
    },
    methods: {
        // 搜索某个学校全部课程组合
        async selectAll() {
            let fd1 = new FormData();
            fd1.append('schoolId', this.userInfo.schoolId)
            let result1 = await this.$axios.post("http://39.105.215.62:8200/courseCombination/selectCourseCombinations?pageNum=1&pageSize=10", fd1);
            console.log(result1);
            if (result1.code == 200) {
                this.CombinationList = result1.data.records
            }
        },
        deleteC(id) {
            console.log(id);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let result1 = await this.$axios.post("http://39.105.215.62:8200/courseCombination/deleteCourseCombination", { id: id });
                console.log(result1);
                if (result1.code == 200) {
                    await this.selectAll()
                    this.$message({
                        type: 'success',
                        message: result1.msg
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 添加课程组合
        async addCourse() {
            let res = await this.$axios.post('http://39.105.215.62:8200/courseCombination/addCourseCombination', { schoolId: this.userInfo.schoolId, yuwen: 1, shuxue: 1, yingyu: 1, wuli: 1, lishi: 0, huaxue: 1, shengwu: 1, zhengshi: 0, dili: 0 })
        }
    },
    // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
    async mounted() {
        this.$emit("transfer", this.msg);
        this.userInfo = JSON.parse(sessionStorage.getItem('info'));
        console.log(this.userInfo);
        // let res = await this.$axios.post("http://39.105.215.62:8100/student/findStudentInfoCreatedUser", { studentId: this.userInfo.userId, schoolId: this.userInfo.schoolId });
        // console.log(res);
        // let res = await this.$axios.post("http://39.105.215.62:8100/student/findStudents?pageNum=1&pageSize=10", { studentId: this.userInfo.userId, schoolId: this.userInfo.schoolId });
        // console.log(res.data.records[0]);

        // let fd = new FormData();
        // fd.append('id', res.data.id)
        // let result = await this.$axios.post("http://39.105.215.62:8100/student/findStudentCourseCombination", fd);
        // console.log(result);


        await this.selectAll()
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}
</style>
  